<template>
	<view>
		<view class="uni-common-mt">	
			<view class="uni-form-item uni-column user-input">
				<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<image class="avatar" :src="userinfo.avatar"></image>
				</button>
			</view>
			<view class="uni-form-item uni-column user-input">
				<view class="title">昵称</view>
				<view class="input">
					<input type="nickname" @input="onNickname" class="weui-input" :value="userinfo.nickname" placeholder="请输入昵称"/>
					<!-- <input class="uni-input" @input="onNickname" :value="consumer.nickname" maxlength="10" placeholder="您的昵称" /> -->
				</view>
			</view>
			<view class="uni-form-item uni-column user-input">
				<view class="title">姓名</view>
				<view class="input">
					<input class="uni-input" @input="onRealname" :value="userinfo.realname" maxlength="10" placeholder="真实姓名" />
				</view>
			</view>
			<view class="fenjie"></view>
			<view class="uni-form-item uni-column user-input">
				<view class="title">性别</view>
				<view class="input">
					<radio-group @change="onGender">
					            <label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in gender" :key="item.value">
					                <radio :value="item.value" :checked="item.checked" />
									<span>{{item.label}}</span>
					            </label>
					</radio-group>
					<!-- <input class="uni-input" @input="onGender" :value="userinfo.gender === 1 : '男' ? : '女'" maxlength="25" placeholder="先生/女士" /> -->
				</view>
			</view>
			<view class="fenjie"></view>
			<view class="uni-form-item uni-column user-input">
				<view class="title">手机</view>
				<view class="input">
					<input class="uni-input" type="number" @input="onPhone" :value="userinfo.phone" maxlength="11" placeholder="您的手机号码" />
				</view>
			</view>
			<view class="fenjie"></view>
			<view class="uni-form-item uni-column user-input">
				<view class="title">邮箱</view>
				<view class="input">
					<input class="uni-input"  @input="onEmail" :value="userinfo.email" maxlength="50" placeholder="联系您的方式" />
				</view>
			</view>

			<view class="fenjie"></view>
			<view class="uni-form-item uni-column user-input">
				<view class="title">简介</view>
				<view class="input">
					<input class="uni-input" @input="onInformation" :value="userinfo.information" maxlength="200" placeholder="您的个人介绍" />
				</view>
			</view>
		</view>
		<button class="up-button" @click="upInfo()">提交信息</button>
		<view class="notes">
			<p><span>*</span>您认为不必要的信息可直接忽略，本平台所有信息均用于报名。您发出的名片中只显示您的“姓名、手机、公司、职位和简介”，若涉及您的隐私，请谨慎使用您的名片功能。</p>
			<p><span>*</span>信息不全可能无法顺利报名某些展会，为了方便您顺利报名，若报名信息被驳回，您可以随时对个人信息进行修改并再次提交报名信息。</p>
		</view>
	</view>
</template>

<script>
	// 按需导入 mapState 辅助函数
	import { mapState,mapMutations } from 'vuex'
	export default {
		name: 'userInfo',
		computed: {
		   // 将 m_user 模块中的 userinfo 映射到当前页面中使用
		   ...mapState('m_user', ['userinfo']),
		 },
		data() {
			return {
				consumer: {
					id: '',
					avatar: '',
					nickname: '',
					realname: '',
					phone: '',
					email: '',
					information: '',
				},
				gender: [{
					label: "男",
					value: 1,
					checked: true
				}, {
					label: "女",
					value: 2,
					// checked: true
				}],
			};
		},
		created() {
			 this.consumer.id = this.userinfo.id;
			//请求接口获取个人信息
			this.getConsumerInfo();
			// 加载信息
			this.consumer = this.userinfo;
			this.gender.value = this.userinfo.gender;
		},
		methods: {
			...mapMutations('m_user',['updateUserInfo']),
			//根据id获取个人信息
			async getConsumerInfo(){
				const { data: res } =  await uni.$http.get('/api/public/getUserInfo/', this.consumer)
				if(res.code !== 200){
					return uni.$showMsg('获取信息失败！')
				}
				this.updateUserInfo(res.data);
				return uni.$showMsg('获取信息成功！')
			},
			
			// 选择用户头像
			onChooseAvatar(e) {
				console.log("详细信息",e.detail);
				this.consumer.avatar = e.detail.avatarUrl
			 },
			// 绑定输入监听事件
			onNickname(event) {
				console.log(event)
				this.consumer.nickname = event.target.value
			},
			onRealname(event) {
				console.log(event)
				this.consumer.realname = event.target.value
			},
			onGender(event) {
				console.log(event)
				this.consumer.gender = this.radio  = event.detail.value
				// this.consumer.gender  = event.target.value
			},
			onPhone(event) {
				console.log(event)
				this.consumer.phone = event.target.value
			},
			onEmail(event) {
				console.log(event)
				this.consumer.email = event.target.value
			},
			onInformation(event) {
				console.log(event)
				this.consumer.information = event.target.value
			},
			//修改信息
			async upInfo() {
				const that = this;
			  // 询问用户是否修改信息
			  const [err, succ] = await uni.showModal({
			    title: '提示',
			    content: '确认修改信息吗？'
			  }).catch(err => err)
			  if (succ && succ.confirm) {
			       // 用户确认了修改信息的操作
			       // 调用后端接口请求
				   const { data: res } =  await uni.$http.post('/api/public/update', that.consumer)
			       if(res.code !== 200){
					  return uni.$showMsg('修改信息失败！')
				   }
				    // that.updateUserInfo(res.data);
					 return uni.$showMsg('修改信息成功！')
			    }
			  },
		}
	}
</script>

<style lang="scss">
	.avatar-wrapper {
	      width: 90px;
		  padding: 0;
		  margin: 30rpx auto 0 auto;
	      border-radius: 50%;
	      box-shadow: 0 1px 5px black;
		  image {
		  	width: 90px;
		  	height: 90px;
		  	border-radius: 50%;
		  	display: block;
		  	border: 2px solid white;
		  }
	    }
.user-input{
	width: 335px;
	margin: 20px auto;
	display: flex;
	
	.input{
		width: 280px;
		margin-left: 20px;
	}
}

.fenjie{
	width: 335px;
	height: 1px;
	background: #ddd;
	margin: 0 auto;
}

.up-button{
	width: 160px;
	height:40px;
	background: #488ac7;
	border-radius: 4px;
	font-size: 16px;
	line-height: 40px;
	color: white;
	margin-top: 30px;
}

.notes{
	width: 335px;
	margin: 20px auto 50px;
	font-size: 14px;
	
	span{
		color: red;
		margin-right: 4px;
	}
	p{
		color: #999;
	}
}
</style>
